<template>
    <section class="empty flexv" :style="{background: bgColor}">
        <img :src="src" alt="" :style="{width: icoWidth, height: icoHeight}" class="ico">
        <p :style="{color: tipColor}" class="tip">{{tip}}</p>
        <router-link :to="'/classify/0'" class="btn red" v-if="btnTxt">{{btnTxt}}</router-link>
        <router-link :to="'/addCard'" class="add-btn white tc" v-if="addBtn">{{addBtn}}</router-link>
        <slot name="collection"></slot>
    </section>    
</template>

<script>
export default {
    props: {
        // 背景颜色
        bgColor: {
            type: String,
            default: '#fff'
        },
        // ico路径
        src: {
            type: String,
            default: ""
        },
        // ico宽度
        icoWidth: {
            type: String,
            default: "4.18rem"
        },
        // ico高度
        icoHeight: {
            type: String,
            default: "3.1rem"
        },
        // 提示文字
        tip: {
            type: String,
            default: "这里什么都没有哦~"
        },
        // 提示文字颜色
        tipColor: {
            type: String,
            default: "#666"
        },
        // 按钮
        btnTxt: {
            type: String,
            default: ''
        },
        // 添加银行卡
        addBtn: {
            type: String,
            default: ''
        }
    },
    data() {
        return {}
    },

}
</script>

<style lang="less" scoped>
    .empty {
        min-height: calc(100vh - 0.88rem);
        padding-top: 2.5rem;
        text-align: center;
        background-color: #fff;
        .ico {
            margin: 0 auto;
        }
        .tip {
            margin-top: 0.48rem;
            font-size: 0.28rem;
        }
        .btn{
            height: 0.8rem;
            margin-top: 0.64rem;
            padding: 0 0.74rem;
            font-size: 0.34rem;
            line-height: 0.76rem;
            border: 2px solid #ff2e2e;
            border-radius: 0.4rem;
            display: inline-block;
        }
        .add-btn{
            width: 5.18rem;
            height: 0.9rem;
            margin: 0.8rem auto;
            border-radius: 0.45rem;
            line-height: 0.9rem;
            font-size: 0.32rem;
            background-color: #ff2e2e;
        }
    }
</style>
